<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <users-tree v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container"></div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              ref="waterTable"
              v-loading="listLoading"
              :cell-style="{padding:0+'px'}"
              :data="list"
              :row-style="{height:40+'px'}"
              border
              fit
              height="700"
              highlight-current-row
              stripe
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column align="center" label=设备类型>
                <template slot-scope="{row}">
                  <span>{{ row.class }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="区域">
                <template slot-scope="{row}">
                  <span>{{ row.area_name }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="安装量" width="370">
                <template slot-scope="{row}">
                  <span>{{ row.total }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {installList} from "@/api/agent";
import UsersTree from "@/views/agent/components/UsersTree";


export default {
  components: {UsersTree},
  name: "user-report",
  data() {
    return {
      tableKey: 0,
      listLoading: true,
      list: [],
      listQuery: {
        uid: 0,
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      installList(this.listQuery).then(res => {
        if (res.code == 20000) {
          this.list = res.data.list
        } else {
          this.$message.error(res.message)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    onHandleNodeClick(data) {
      this.listQuery.uid = data.id
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
